<template>
    <div class="gvb_admin">
        <aside :class="{ collapsed: store.collapse }">
            <gvb_logo></gvb_logo>
            <Gvb_menu></Gvb_menu>
        </aside>
        <main>
            <div class="gvb_head">
                <Gvb_bread_crumb></Gvb_bread_crumb>
                <div class="gvb_function_area">
                    <IconHome class="action_icon" @click="goIndex"></IconHome>
                    <gvb_theme></gvb_theme>
                    <div class="gvb_user_info_menu">
                        <a-dropdown>
                            <div class="gvb_user_info_menu_dropdown">
                                <img src="/image/logo.jpg" alt="">
                                <span class="gvb_user_info_menu_dropdown_span">Kiral</span>
                                <IconDown></IconDown>
                            </div>
                            <template #content>

                                <a-doption>Option 1</a-doption>
                                <a-doption>Option 2</a-doption>
                                <a-doption>Option 3</a-doption>
                                <a-doption>Option 4</a-doption>
                                <a-doption>Option 5</a-doption>
                            </template>
                        </a-dropdown>
                    </div>
                </div>
            </div>
            <gvb_tabs></gvb_tabs>
            <div class="gvb_container">
                <router-view v-slot="{ Component }">
                    <transition name="fade" mode="out-in">
                        <component :is="Component"></component>
                    </transition>
                </router-view>
            </div>

        </main>

    </div>

</template>


<script setup lang="ts">
import Gvb_menu from '@/components/admin/gvb_menu.vue';
import Gvb_bread_crumb from '@/components/admin/gvb_bread_crumb.vue';
import gvb_logo from '@/components/admin/gvb_logo.vue';
import gvb_tabs from '@/components/admin/gvb_tabs.vue';
import gvb_theme from '@/components/common/gvb_theme.vue';
import { useStore } from '@/stores';
import {
    IconMenu,
    IconDown,
    IconHome,
} from '@arco-design/web-vue/es/icon';
import { useRoute, useRouter } from "vue-router";


const route = useRoute()
const router = useRouter()
const store = useStore()

function goIndex() {
    router.push({
        name: 'index'
    })
}


</script>

<style lang="scss">
.gvb_admin {
    display: flex;
    color: var(--color-text-1);
    height: 100vh;

    aside {
        width: 240px;
        border-right: 1px solid var(--bg);
        height: 100vh;
        background-color: var(--color-bg-1);
        transition: all .3s;
        position: relative;
    }

    aside.collapsed {
        width: 48px;

        &~main {
            width: calc(100% - 48px);
        }
    }

    main {
        width: calc(100% - 240px);
        overflow-x: hidden;
        overflow-y: auto;
        transition: all .3s;

        .gvb_head {
            height: 60px;
            width: 100%;
            border-bottom: 1px solid var(--bg);
            display: flex;
            align-items: center;
            padding: 0 20px;
            justify-content: space-between;

            .gvb_bread_crumbs {
                flex: 1;
            }

            .gvb_function_area {
                display: flex;
                align-items: center;

                .action_icon {
                    margin-right: 10px;
                    cursor: pointer;
                    font-size: 16px;
                    transition: color 0.3s;

                    &:hover {
                        color: var(--active);
                    }
                }



                .gvb_user_info_menu {
                    img {
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                    }

                    .gvb_user_info_menu_dropdown {
                        display: flex;
                        cursor: pointer;
                        align-items: center;

                        .gvb_user_info_menu_dropdown_span {
                            margin: 0 5px
                        }
                    }
                }
            }
        }


        .gvb_container {
            background-color: var(--bg);
            min-height: calc(100vh - 90px);
            padding: 20px;
        }


    }

}

.fade-leave-to {
    opacity: 0;
    transform: translateX(30px);
}

.fade-enter-active {
    transform: translateX(-30px);
    opacity: 0;
}

.fade-enter-to {
    transform: translateX(0px);
    opacity: 1;
}

.fade-leave-active,
.fade-enter-active {
    transition: all 0.3s ease-out;
}
</style>